<template>
  <div style="display: flex;  flex-direction: column;">
    <div style="display: flex; max-height: 20px">
      <h5 style="margin-left: 30px">采购方式</h5>
      <el-select v-model="procurementMethod" placeholder="请选择" style="margin-top: -5px;margin-left: 10px; width: 120px">
        <el-option :key="''" :label="'全部'" :value="''"></el-option>
        <el-option :key="'磋商'" :label="'磋商'" :value="'磋商'"></el-option>
        <el-option :key="'委托'" :label="'委托'" :value="'委托'"></el-option>
        <el-option :key="'竞价'" :label="'竞价'" :value="'竞价'"></el-option>
      </el-select>
      <h5 style="margin-left: 30px">项目编号</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入名称" v-model="projectNumber"></el-input>
      <h5 style="margin-left: 30px">项目名称</h5>
      <el-input style="margin-top: -5px; width:120px; margin-left: 10px" placeholder="请输入地址" v-model="projectName" ></el-input>
      <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
      <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-refresh" @click="reset">重置</el-button>
    </div>
    <div style="display: flex; margin-top: 20px">
      <el-table :data="tableData" style="width: 100%" height="480">
        <el-table-column fixed label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="projectNumber" label="项目编号" width="120"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="150"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="50"></el-table-column>
        <el-table-column prop="state" label="状态" width="70">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="danger" effect="circle">待进行</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="warning" effect="circle">待公告</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success" effect="circle">已公告</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="info" effect="circle">待公示</el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="primary" effect="circle">已公示</el-tag>
            <el-tag v-else type="success" effect="circle">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dealer" label="成交人(品牌)" width="150"></el-table-column>
        <el-table-column prop="fundingSource" label="资金来源" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.fundingSource === '预算'">预算</span>
            <span v-else-if="scope.row.fundingSource === '拨款'">拨款</span>
            <span v-else-if="scope.row.fundingSource === '其他'">其他</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="applyingDepartment" label="申请科室" width="100"></el-table-column>
        <el-table-column prop="applicant" label="申请人" width="100"></el-table-column>
        <el-table-column prop="procurementMethod" label="采购方式" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.procurementMethod === '磋商'">磋商</span>
            <span v-else-if="scope.row.procurementMethod === '委托'">委托</span>
            <span v-else-if="scope.row.procurementMethod === '竞价'">竞价</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectType" label="项目类型" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.projectType === '工程'">工程</span>
            <span v-else-if="scope.row.projectType === '耗材'">耗材</span>
            <span v-else-if="scope.row.projectType === '设备'">设备</span>
            <span v-else-if="scope.row.projectType === '维护'">维护</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="purchType" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 4" type="success" @click="handleWin(scope.row)">发布中标通知</el-button>
            <el-button v-if="scope.row.status >= 5" type="primary" @click="handleLook(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 900px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!--    发布中标通知-->
    <el-dialog
        :visible.sync="dialogWinVisible"
        :custom-class="'slide-right-dialog'"
    >
      <div class="dialog-content">
        <div style="border: 2px solid #409EFF; border-radius: 5px; padding: 20px; background-color: #f2f7fc; margin-bottom: 20px;">
          <el-descriptions :title="winForm.title" style="display: inline-block;margin-top: -100px" column="4" size="mini">
            <el-descriptions-item label="采购方式">{{winForm.procurementMethod}}</el-descriptions-item>
            <el-descriptions-item label="项目预算（万元）">{{ winForm.budget }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="dialog-title"><i class="el-icon-d-arrow-right"></i>发布中标通知</div>
        <el-card>
          <el-form :model="winForm" :rules="rules" :ref="winForm" label-width="100px" class="demo-ruleForm custom-form" style="margin-top: 20px">
            <el-form-item label="成交人(品牌)" prop="dealer">
              <el-input v-model="winForm.dealer" readonly></el-input>
            </el-form-item>
            <el-form-item label="通知内容" prop="notiText">
              <el-input type="textarea" v-model="winForm.notiText"></el-input>
            </el-form-item>
            <el-form-item label="最终报价(元)" prop="finalMoney">
              <el-input v-model="winForm.finalMoney"></el-input>
            </el-form-item>
            <el-form-item label="得分" prop="score">
              <el-input v-model="winForm.score"></el-input>
            </el-form-item>
            <el-form-item label="成交通知书" prop="winFileUrl">
              <el-upload
                  :action="'http://'+serverIp() + ':8081/jdyfy/file/upload'"
                  :show-file-list="true"
                  :on-success="handleAnnounFile"
                  :on-error="handleAnnounFileError">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传不超过50mb的文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save">确定</el-button>
              <el-input type="reset" style="width: 60px; margin-left: 10px;margin-right: 10px">重置</el-input>
              <el-button @click="dialogWinVisible = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-dialog>
    <!--    查看-->
    <el-dialog
        :visible.sync="dialogLookVisible"
        :custom-class="'slide-right-dialog'"
    >
      <div class="dialog-content">
        <div style="border: 2px solid #409EFF; border-radius: 5px; padding: 20px; background-color: #f2f7fc; margin-bottom: 20px;">
          <el-descriptions :title="lookForm.title" style="display: inline-block;margin-top: -100px" column="4" size="mini">
            <el-descriptions-item label="采购方式">{{lookForm.procurementMethod}}</el-descriptions-item>
            <el-descriptions-item label="项目预算（万元）">{{ lookForm.budget }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="dialog-title"><i class="el-icon-d-arrow-right"></i>通知预览</div>
        <el-card>
          <el-form :model="lookForm" :rules="rules" :ref="lookForm" label-width="100px" class="demo-ruleForm custom-form" style="margin-top: 20px">
            <el-form-item label="成交人(品牌)" prop="dealer">
              <el-input v-model="lookForm.dealer" readonly></el-input>
            </el-form-item>
            <el-form-item label="通知内容" prop="notiText">
              <el-input type="textarea" v-model="lookForm.notiText"></el-input>
            </el-form-item>
            <el-form-item label="成交通知书" prop="winFileUrl">
              <a :href="lookForm.winFileUrl" target="_blank" v-if="lookForm.winFileUrl">成交通知书</a>
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogLookVisible = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addProject, addWinnotiProject, getProjectPageByStatusSpace, getWinnotiByProjectNumber} from "@/api/project";
import {serverIp} from "../../../../public/config.js";

export default {
  name: "WinNoti",
  data() {
    return {
      tableData: [],
      procurementMethod:'',
      projectNumber: '',
      projectName: '',
      pageNum: 1,
      total: 0,
      pageSize: 10,
      dialogWinVisible: false,
      dialogLookVisible: false,
      winForm: {},
      lookForm: {},
      updateForm: {},
      fileUrl: '',
    }
  },
  created() {
    this.init();
  },
  methods: {
    serverIp() {
      return serverIp
    },
    init() {
      getProjectPageByStatusSpace(this.pageNum, this.pageSize,this.projectNumber,this.projectName,this.procurementMethod,5,5).then(res => {
        this.tableData = res.records;
        this.total = res.total;
        console.log(res.records);
      })
    },
    handleWin(row) { //发布中标通知
      console.log(row);
      this.winForm.title = `${row.projectName}（招标项目编号${row.projectNumber}）`
      this.winForm.budget = row.budget
      this.winForm.procurementMethod = row.procurementMethod
      this.winForm.projectNumber = row.projectNumber
      this.winForm.dealer = row.dealer
      this.dialogWinVisible = true
    },
    save() { //发布中标通知
      this.winForm.winFileUrl = this.fileUrl !== '' ? this.fileUrl : this.winForm.winFileUrl
      this.fileUrl = ''
      console.log(this.winForm);
      addWinnotiProject(this.winForm).then(res => {
        this.$message({
          message: "发布中标通知成功",
          type: 'success'
        });
        this.dialogWinVisible = false
      }).catch(err => {
        this.$message.error(err.message);
      }).finally(() => {
        this.init();
      })
      this.updateForm.projectNumber = this.winForm.projectNumber
      this.updateForm.status = 5
      addProject(this.updateForm)
    },
    async handleLook(row) { //查看
      await getWinnotiByProjectNumber(row.projectNumber).then(res => {
        this.lookForm = res
      })
      this.lookForm.title = `${row.projectName}（招标项目编号${row.projectNumber}）`
      this.lookForm.budget = row.budget
      this.lookForm.procurementMethod = row.procurementMethod
      console.log(this.lookForm);
      this.dialogLookVisible = true

    },
    handleSizeChange(val) { // 改变页码
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) { // 改变每页显示条数
      this.pageNum = val;
      this.init();
    },
    handleAnnounFile(row){
      this.fileUrl = row
      this.$message.success('文件添加成功')
    },
    handleAnnounFileError(err, file, fileList) {
      // 上传失败的处理逻辑
      this.$message.error('文件上传失败，请重试');
    },
    reset(){
      this.procurementMethod = ''
      this.projectName = ''
      this.projectNumber = ''
      this.init()
    },
  },
}
</script>

<style scoped>
>>> .slide-right-dialog {
  top: -150px;
  right: 0;
  margin: 0;
  position: absolute;
  height: 1000px;
  width: 600px;
  animation: slide-right 0.3s ease;
}
>>> .slide-right-dialog .el-dialog__title {
  font-size: 14px; /* 调整对话框正文内容的字体大小 */
}
</style>